/*

This file is part of Ext JS 4

Copyright (c) 2011 Sencha Inc

Contact:  http://www.sencha.com/contact

GNU General Public License Usage
This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.

If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.

*/
/*Ext.require([
    'Ext.data.*',
    'Ext.grid.*',
    'Ext.tree.*'
]);*/
Ext.require(['*']);

//we want to setup a model and store instead of using dataUrl
Ext.define('itemFaseModel', {
	extend: 'Ext.data.Model',
	fields: [
		{name: 'nombreItem',     type: 'string'},
		{name: 'nombreFase',     type: 'string'}
		//{name: 'duration', type: 'string'}
	]
});


Ext.define('modelTipoItems', {
	extend: 'Ext.data.Model',
	proxy : {
		type : 'ajax',
		//actionMethods : 'POST',
		//url : '/roles', //application/controllers/Habitacion.php
		
		api: {
                read: '/items/viewTipoItems'
                //create: '/roles/create',
                //save: '/roles/update',
                //destroy: '/roles/destroy'
		},
	
		reader: {
				
                type: 'json',
                successProperty: 'success',
                root: 'tiposItems',
                messageProperty: 'message'
            }
	},
	
	fields: [
		{type: 'int' , name: 'idTipoItem'},
		{type: 'string', name: 'nombreTipoItem'}
		
			]
});




Ext.define('DesarrolloProyectoLiveSearchGridPanel', {
    extend: 'Ext.ux.LiveSearchGridPanel',
    
    initComponent: function() {
        
        //Ext.Msg.alert('Estoy en el initComponet del live!!!');
        var me = this;
        me.tbar = ['Buscar',{
                 xtype: 'textfield',
                 name: 'searchField',
                 hideLabel: true,
                 width: 200,
                 listeners: {
                     change: {
                         fn: me.onTextFieldChange,
                         scope: this,
                         buffer: 100
                     }
                 }
            }, {
                xtype: 'button',
                text: '<',
                tooltip: 'Anterior',
                handler: me.onPreviousClick,
                scope: me
            },{
                xtype: 'button',
                text: '>',
                tooltip: 'Siguiente',
                handler: me.onNextClick,
                scope: me
            }, '-', {
                xtype: 'checkbox',
                hideLabel: true,
                margin: '0 0 0 4px',
                handler: me.regExpToggle,
                scope: me                
            }, 'Expresión Regular', {
                xtype: 'checkbox',
                hideLabel: true,
                margin: '0 0 0 4px',
                handler: me.caseSensitiveToggle,
                scope: me
            }, 'Detectar Mayúsculas'];
        
        me.callParent(arguments);
    }
});


 Ext.define('Ext.form.ClosableFieldSet', {
	extend: 'Ext.form.FieldSet',
	alias: 'widget.closablefieldset'  
});







Ext.define('App.view.DesarrolloProyecto', {
	extend: 'Ext.panel.Panel',
    alias: 'widget.tabfirst',
    //title: 'Administación de Proyectos',
	layout:'anchor',

	initComponent: function () {
	
		//para que funcionen los toolTips
        Ext.QuickTips.init();
        
        
        
		this.store = Ext.create('Ext.data.Store', {
			storeId: 'itemsFaseStore',
			model: 'itemFaseModel',
			fields:['nombre', 'lastname', 'senority', 'department'],
			groupField: 'nombreFase',
			//autoLoad: true,
			proxy: {
				type: 'ajax',
				url: '/desarrolloProyecto/traerItems',
				reader: {
					type: 'json',
					root: 'items'
				}
			} 
			
		});

        
        this.myIdProyecto = idProyectoAux;
        
        console.log('this.myIdProyecto = idProyectoAux;-->');
        console.log(this.myIdProyecto);
        
        
         //cargamos el store para que nos traiga todos los items de un determinado proyecto
        this.store.load(
			{
				params:{idProyecto: idProyectoAux}
			}
        );
        
        
        
        this.grouping = Ext.create('Ext.grid.feature.Grouping', {
			groupHeaderTpl: 'Fase: {name}',
			enableGroupingMenu: false
		}); 
    
		this.idBtonCrearItem = 'btn_grid_crear_item' + this.myIdProyecto;
		console.log(this.idBtonCrearItem);
		
		
		//toolBar
		this.Tblgrid = Ext.create('Ext.toolbar.Toolbar',{
			items : [
				{
					xtype : 'button',
					id : this.idBtonCrearItem,//'btn_grid_crear_item' + this.myIdProyecto,
					itemId : this.idBtonCrearItem,//'btn_grid_crear_item' + this.myIdProyecto,
					text : 'Crear Item',
					iconCls : 'icon_button_add',
					disabled : false,
					tooltip : 'Crear un nuevo Item en la Fase Seleccionada...',
					scope : this,
					disabled: true,
					handler : this.CrearItemRecordSelect
				},
				{
					xtype : 'tbseparator'
				},{
					xtype : 'button',
					id : 'btn_grid_editar_rol',
					itemId : 'btn_grid_editar_rol',
					text : '',
					iconCls : 'icon_btn_grid_editar_rol',
					disabled : true,
					tooltip : 'Editar el registro seleccionado',
					scope : this,
					handler : this.EditRecordSelect
				},{
					xtype : 'tbseparator'
					},{
					xtype : 'button',
					id : 'btn_grid_eliminar_rol',
					itemId : 'btn_grid_eliminar_rol',
					text : '',
					iconCls : 'icon_btn_grid_eliminar_rol',
					disabled : true,
					tooltip : 'Eliminar el registro seleccionado',
					scope : this,
					handler : this.DeleteRecordSelect
				},{
					xtype : 'tbseparator'
				}
			]
		});
    
    
    
    
    
    
    
		this.grid = Ext.create(/*'Ext.grid.Panel'*/ 'DesarrolloProyectoLiveSearchGridPanel', {
			
			frame : true,
			store : this.store,
			stripeRows : true,
			columnLines: true,
			loadMask : true,
			//width : 550,
			//height : 400,
			anchor: '60% 90%', 
			features: [this.grouping],
			dockedItems : [this.Tblgrid,
				Ext.create('Ext.ux.StatusBar', {
				defaultText: this.defaultStatusText,
				name: 'searchStatusBar'
				})
			],
			columns: 
			[
				{
					text: 'Nombre Item',
					dataIndex: 'nombreItem',
					flex: 1
				}
			],
			bbar: Ext.create('Ext.PagingToolbar', {
				store : this.store,
				displayInfo : true,
				displayMsg : 'Mostrando registros {0} - {1} de {2}',
				emptyMsg : "Sin registros para mostrar"
			}),
			listeners:{
				scope:this,     
				groupclick : function(view, node, group, e, eOpts){
					console.log("en el listenerrrr, this.idBtonCrearItem");
					console.log(this.idBtonCrearItem);
					
					Ext.getCmp(this.idBtonCrearItem).setDisabled(false);
					 
				},
				
				'selectionchange': function(view, records) {
					
					Ext.getCmp(this.idBtonCrearItem).setDisabled(true);
				}
				   
			}
			
		});
	
	
		
		this.items = [this.grid];
        this.callParent(arguments);
			
	
		this.grid.getStore().addListener('load', function(store, records, successful, operation, options){
			if(successful){
				if(records.length > 0){
					var first = this.getStore().first();
					var title = 'Desarrollar Proyecto'; //'Año: ' + first.get('anho') + ', Periodo: ' + first.get('periodoAnual') ;
					this.setTitle(title);
				}
			}
		}, this.grid);
        

	},
	
	
	CrearItemRecordSelect: function(){
		
		//DataStore para el ComboBox de la lista de Tipos de Items
		this.dsCmbTipoItems = Ext.create('Ext.data.Store', {
			model : 'modelTipoItems',
			autoLoad : true
		}); 
		
		
		//ComboBox para mostrar los tipos de items disponibles
		this.cmbTiposItems = Ext.create(/*'Ext.form.ComboBox'*/'Ext.ux.form.field.BoxSelect', {
						
			fieldLabel: 'Tipo de Item',
			name : 'cmb_tiposItems',
			id: 'id_cmb_tiposItems',
			displayField: 'nombreTipoItem',
			width: 500,
			//height: 70,
			//labelWidth: 130,
			store: this.dsCmbTipoItems,
			queryMode: 'local',
			emptyText: 'Seleccione un Tipo de Item',
			valueField: 'idTipoItem',
			multiSelect :false,
			allowBlank : false,
			listeners:{
				scope: this,
				'select': function(combo, rec, idx){
					//onUpdateClick(combo, rec, idx)
					console.log(combo);
					console.log(rec);
					console.log(idx);
					idTipoItemEnviar = combo.value;
					console.log(idTipoItemEnviar);
					
					//traemos los permisos que tiene el rol que estamos editando
					Ext.Ajax.request(
					{
						url:'/items/traerAtributos',
						//form:"[STICK FORM ID HERE]",
						method:'GET',
						scope : this,
						params: { idTipoItem: idTipoItemEnviar},
						success: function(response, opts) {
							//alert("successfull");
							obj = Ext.decode(response.responseText)
							//Ext.getCmp('id_cmbx_permisos').setValue(obj.permisos)
							
							panelExiste = Ext.getCmp('id_datos_fields_item');
							//console.log('panel existente:');
							//console.log(panelExiste);
							
							if(panelExiste != null){
								panelExiste.destroy();
								
							}
							
							atributos = obj.atributos;
							//console.log(atributos);
							
							campos = [];
							
							for(index in atributos){
								console.log(atributos[index]);
								
								tipoAux = 'textfield';
								anchorAux = '80%';
								if(atributos[index].tipo == 'FECHA'){
									anchorAux = '40%';
									tipoAux = 'datefield';
								}
								
								campos.push({fieldLabel:atributos[index].nombre, name: 'campo' + index, xtype : tipoAux, anchor: anchorAux});
							}
							
							
							Ext.getCmp('id_panel_nuevo_item').add(Ext.widget('closablefieldset', {
								columnWidth: 0.5,
								id:'id_datos_fields_item',
								title: 'Atributos',
								collapsible: true,
								defaultType: 'textfield',
								defaults: { anchor: '100%' },
								layout: 'anchor',
								items: campos
							}));
							
						},
						failure:function(res,opt) {
							alert("request failed");
						}
					});
					
				}                           
			}

		});
		
		
		//Creamos el FormPanel que contendra los datos a agregar
		this.FormAddModal = Ext.create('Ext.form.Panel',{
			frame :true,
			title : 'Nuevo Item',
			name: 'panel_nuevo_item',
			id: 'id_panel_nuevo_item',
			bodyStyle :'padding:5px 5px 0',
			width : 550,
			//height : 300,
			autoHeight:true,
			defaultType: 'textfield',
			items: 
			[
				{
					xtype: 'closablefieldset',
					columnWidth: 0.5,
					title: 'Creación de nuevo Item',
					//collapsible: true,
					defaultType: 'textfield',
					defaults: { anchor: '100%' },
					layout: 'anchor',
					items: 
					[
						{
							fieldLabel: 'Código',
							name: 'id_codigo',
							disabled: true,
							anchor: '40%'
						},
						{
							xtype : 'fieldcontainer',
							anchor: '70%',
							labelStyle : 'font-weight:bold;padding:0',
							items: [
								this.cmbTiposItems,
							]
						}
					
					]
				}
			],
			buttons: [{
				text : 'Guardar',
				id : 'id_btn_add_guardar_rol',
				iconCls : 'icon_button_save',
				scope : this,
				handler : this.HandlerGuardarDatosItem
				},{
				text : 'Cancelar',
				id : 'id_btn_add_cancelar_rol',
				iconCls : 'icon_button_cancel',
				scope : this,
				handler : function(){
					this.WindowFormAddModal.close();
				}
			}]
		});
		
		
		//Una vez creado el FormPanel lo reseteamos
		this.FormAddModal.getForm().reset();
		//Creamos la ventana que contendra el FormaPanel creado anteriormente
		this.WindowFormAddModal = Ext.create('Ext.window.Window',{
			title : 'Agregar Nuevo Item',
			bodyStyle : 'padding:10px 10px 10px 10px',
			region : 'center',
			width : 580,
			//height : 400,
			autoHeight:true,
			modal : true,
			resizable : false,
			draggable : false,
			closable : true,
			closeAction : 'destroy',
			items : [this.FormAddModal]
		});
		//Mostramos la ventana con el formulario de edicion y los datos del registro seleccionado
		this.WindowFormAddModal.show();
		
		
	},
	
	//método que guarda un nuevo item
	HandlerGuardarDatosItem:function(){
		//Ext.Msg.alert("Info",this.FormAddModal.getForm().isValid());
		if (this.FormAddModal.getForm().isValid()){
			//Ext.Msg.alert("Info","Pasé la validación");
			
			var rec = new modelRoles({
				
				nombreRol: Ext.getCmp('nombreRolAdd_rol').getValue(),
				descripRol: Ext.getCmp('descripAdd_rol').getValue()
			});
			
			
			this.FormAddModal.getForm().submit({
				method : 'POST',
				//type: "json",
				url : '/roles/create', 
				clientValidation : true,
				scope : this,
				params : {
					ids_permisos : Ext.JSON.encode(Ext.getCmp('id_cmbx_permisos').getValue()),
					rol : Ext.JSON.encode(rec)
				},
				success: function(form, action){
					this.WindowFormAddModal.close();
					this.store.load();
				},
				failure: function(form, action){
					Ext.Msg.alert("Error",action.result);
					Ext.MessageBox.show({
						title : 'Informacion del sistema',
						msg : action.result.msg,
						buttons : Ext.MessageBox.OK,
						icon : Ext.MessageBox.ERROR,
						width : 350
					});
				} //End failure
			});
		}
	},
	
	
	
	
});


